<template>
	<view class="web">
		<view class="head">
			<p class='teach'>___众多知名导师入住平台___</p>
		</view>
		<view class="content" >
			<view class="little" v-for='item in list' :key="item.id">
				<img :src="item.img" alt="">
				<p>{{item.name}}</p>
			</view>
		</view>
		<view class="text">
				<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					【昕孕瑜伽】创立于200N年，专注于服务瑜伽专业人士，提供
					孕妇瑜伽教学、导师培训。聚集一批行业一线导师与众多优秀瑜伽人才，本着打造最优质、专业的孕妇瑜伽在线教育和问答互动平台。
				</p>
			
		</view>
		<view class="otline">
			<p>热线电话：400-000-0001</p>
			<p>工作时间：10：00-19：00</p>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list:[]
			}
		},
		created() {
			this.$api.getpsxtutor().then(res=>{
				console.log(res.data)
				this.list=res.data
			})
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.web{
	width:100%;
	height: 100vh;
	background-color: ghostwhite;
}
.trime{
	width:20upx;
}
.head{
	width: 100%;
	height:400upx;
	display: flex;
	align-items: flex-end;
	background-image: url('../../static/psx/bg.png');
	background-size: 100%;
}
.teach{
	width: 100%;
	height:60upx;
	background-color:black;
	opacity: 0.5;
	line-height: 60upx;
	text-align: center;
	color: white;
}
.content{
	width: 100%;
	height: 400upx;
	display: flex;
	background-color: white;
	flex-wrap: wrap;
	    flex-direction: column-reverse;
	    align-content: space-around;
	    justify-content: center;
}
.little{
	width: 106upx;
	height: 150upx;
	font-size:24upx;
	text-align: center;
}
.little img{
	width: 100upx;
	height: 100upx;
}
.text{
	width: 98%;
	margin: 40upx auto;
	font-size:29upx;
	color:gray;
	/* background-color: aquamarine; */
}
.otline{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	color:gray;
	font-size:24upx;
	flex-direction: column;
	align-content: space-around;
	justify-content: space-around;
	margin-top: 140upx;
}
</style>
